﻿<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
    <!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
    <script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
</head>
<body>

    <div id="app-1">
        <!--原有数组-->
        <ul>
            <li v-for="item in numbers">{{item}}</li>
        </ul>
        <!--除去偶数 计算属性-filter -->
        <ul>
            <li v-for="item in evenNumbers">{{item}}</li>
        </ul>
    </div>
    <div id="app-2">
        <!--原有数组-->
        <ul>
            <li v-for="item in numbers">{{item}}</li>
        </ul>
        <!--除去偶数 计算属性-filter -->
        <ul>
            <li v-for="item in even(numbers)">{{item}}</li>
        </ul>

        <div>
            <span v-for="n in 10">{{ n }} </span>
        </div>
    </div>

    <div id="app-3">
        <form v-on:submit.prevent="addNewTodo">
            <label for="new-todo">Add a todo</label>
            <input v-model="newTodoText"
                   id="new-todo"
                   placeholder="E.g. Feed the cat">
            <button>Add</button>
        </form>
        <ul>
            <li is="todo-item"
                v-for="(todo, index) in todos"
                v-bind:key="todo.id"
                v-bind:title="todo.title"
                v-on:remove="todos.splice(index, 1)"></li>

            <!--<todo-item  v-for="(todo, index) in todos"
                v-bind:key="todo.id"
                v-bind:title="todo.title"
                v-on:remove="todos.splice(index, 1)></todo-item>-->
        </ul>
    </div>

    <div id="app-4">
        <button @click="greet">点我，点我</button>
    </div>

    <div id="app-5">
        <button @click="warn('Form cannot be submitted yet',$event)">点我，点我</button>
    </div>

    <!--在自定义组件里，你可以像任何普通元素一样用 v-for 。
        当在组件中使用 v-for 时，key 现在是必须的。-->
    <!-- 阻止单击事件继续传播 -->
    <a v-on:click.stop="doThis"></a>

    <!-- 提交事件不再重载页面 -->
    <form v-on:submit.prevent="onSubmit"></form>

    <!-- 修饰符可以串联 -->
    <a v-on:click.stop.prevent="doThat"></a>

    <!-- 只有修饰符 -->
    <form v-on:submit.prevent></form>

    <!-- 添加事件监听器时使用事件捕获模式 -->
    <!-- 即元素自身触发的事件先在此处理，然后才交由内部元素进行处理 -->
    <div v-on:click.capture="doThis">...</div>

    <!-- 只当在 event.target 是当前元素自身时触发处理函数 -->
    <!-- 即事件不是从内部元素触发的 -->
    <div v-on:click.self="doThat">...</div>

    <!-- 点击事件将只会触发一次 -->
    <a v-on:click.once="doThis"></a>
    <!--不像其它只能对原生的 DOM 事件起作用的修饰符，
        .once 修饰符还能被用到自定义的组件事件上。

        这个 .passive 修饰符尤其能够提升移动端的性能。


        【.passive 和 .prevent】 一起使用，因为 .prevent 将会被忽略，

        同时浏览器可能会向你展示一个警告。

        请记住，.passive 会告诉浏览器你不想阻止事件的默认行为。-->
    <!-- 只有在 `key` 是 `Enter` 时调用 `vm.submit()` -->
    <input v-on:keyup.enter="submit">
    <input v-on:keyup.page-down="onPageDown">
    <input v-on:keyup.13="submit">
    <script>

        var app1 = new Vue({
            el: "#app-1",
            data: {
                numbers: [1, 2, 3, 4, 5]
            },
            computed: {
                evenNumbers: function () {
                    return this.numbers.filter(function (number) {
                        return number % 2 === 0
                    })
                }
            }
        })

        //在计算属性不适用的情况下(例如，在嵌套 v -for 循环中) 你可以使用一个 method 方法：

        var app2 = new Vue({
            el: "#app-2",
            data: {
                numbers: [1, 2, 3, 4, 5]
            },
            methods: {
                even: function (numbers) {
                    return numbers.filter(function (number) {
                        return number % 2 === 0
                    });
                }
            }
        })

        // 组件
        Vue.component('todo-item', {
            template: '\
                    <li>\
                      {{ title }}\
                      <button v-on:click="$emit(\'remove\')">Remove</button>\
                    </li>\
                  ',
            props:['title']
        })

        var app3 = new Vue({
            el: "#app-3",
            data: {
                newTodoText: '',
                todos: [
                    {
                        id: 1,
                        title:'Do the dishes'
                    },
                    {
                        id: 2,
                        title:'Take out the trash'
                    },
                    {
                        id: 3,
                        title:'Mow the lawn'
                    }
                ],
                nextTodoId:4
            },
            methods: {
                addNewTodo: function () {
                    this.todos.push({
                        id: this.nextTodoId++,
                        title: this.newTodoText
                    })

                    this.newTodoText=''
                }
            }
        })

        var app4 = new Vue({
            el: '#app-4',
            data: {
                name:'vue.js'
            },
            methods: {
                greet: function (event) {
                    //this在方法中指向当前Vue实例
                    alert('Hello,Randy正在学习' + this.name + '!')

                    //event 是原生的DOM事件
                    if (event) {
                        alert(event.target.tagName)
                    }
                }
            }
        })

        var app5 = new Vue({
            el: '#app-5',
            data: {
                name: 'vue.js'
            },
            methods: {
                warn: function (msg, event) {
                    if (event) {
                        event.preventDefault()
                    }
                    alert(msg);

                    ////this在方法中指向当前Vue实例
                    //alert('Hello,Randy正在学习' + this.name + '!')

                    ////event 是原生的DOM事件
                    //if (event) {
                    //    alert(event.target.tagName)
                    //}
                }
            }
        })

        /* 【事件修饰符】
         *
         * 事件处理程序中调用 event.preventDefault() 或 event.stopPropagation() 是非常常见的需求。
         *
         * 尽管我们可以在方法中轻松实现这点，但更好的方式是：方法只有纯粹的数据逻辑，
         *
         * 而不是去处理 DOM 事件细节。
         *
         * 【为了解决这个问题，Vue.js 为 v-on 提供了事件修饰符。】
         *
         * 之前提过，修饰符是由点开头的指令后缀来表示的。
         *
         *
                .stop
                .prevent
                .capture
                .self
                .once
                .passive

         * */

        /* 【按键修饰符】

         */

                                /*
                                // Vue.set
                                Vue.set(vm.items, indexOfItem, newValue)
                                --set(数组，索引，新值)

                                // Array.prototype.splice
                                vm.items.splice(indexOfItem, 1, newValue)

                                你也可以使用 vm.$set 实例方法，该方法是全局方法 Vue.set 的一个别名：

                                    vm.$set(vm.items, indexOfItem, newValue)

                                    为了解决第二类问题，你可以使用 splice：

                                    vm.items.splice(newLength)
                                */




                                /* ---【由于 JavaScript 的限制，Vue 不能检测以下变动的数组】：

                                当你利用索引直接设置一个项时，例如：vm.items[indexOfItem] = newValue
                                当你修改数组的长度时，例如：vm.items.length = newLength

                                举个例子：

                                var vm = new Vue({
                                    data: {
                                        items: ['a', 'b', 'c']
                                    }
                                })
                                vm.items[1] = 'x' // 不是响应性的
                                vm.items.length = 2 // 不是响应性的

                                【由于 JavaScript 的限制，Vue 不能检测对象属性的添加或删除：】
                                 var vm = new Vue({
                                    data: {
                                        a: 1
                                    }
                                })
                                //`vm.a` 现在是响应式的

                                vm.b = 2
                                // `vm.b` 不是响应式的

                                你可以添加一个新的 age 属性到嵌套的 userProfile 对象：

                                Vue.set(vm.userProfile, 'age', 27)

                                有时你可能需要为已有对象赋予多个新属性，比如使用 Object.assign() 或 _.extend()。
                                在这种情况下，你应该用两个对象的属性创建一个新的对象。
                                所以，如果你想添加新的响应式属性，不要像这样：
                                --【错误示范】
                                Object.assign(vm.userProfile, {
                                  age: 27,
                                  favoriteColor: 'Vue Green'
                                })

                                你应该这样做：【正确示范】

                                vm.userProfile = Object.assign({}, vm.userProfile, {
                                  age: 27,
                                  favoriteColor: 'Vue Green'
                                })
                                */


                                /* 有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。
                                 * 在这种情况下，可以创建返回过滤或排序数组的计算属性。
                                 *
                                 *
                                 *
                                 *
                                 * */






                                /*
                                 * Vue 包含一组观察数组的变异方法，所以它们也将会触发视图更新。这些方法如下：
                                 *
                                 * 【变异方法】---会改变被这些方法调用的原始数组
                                 *
                                 * push()
                                 *
                                 * pop()
                                 *
                                 * shift()
                                 *
                                 * unshift()
                                 *
                                 * splice()
                                 *
                                 * sort()
                                 *
                                 * reverse()
                                 *
                                 *
                                 * 【非变异方法】----总是会返回一个新数组
                                 *
                                 * filter()
                                 *
                                 * concat()
                                 *
                                 * slice()
                                 *
                                 *
                                 */
    </script>

</body>
</html>